<template>
  <div>
    <h1>goods item</h1>
    <ul>
      <li v-for="(value, key, index) in itemEgg" :key="index">
        {{ key }}---{{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // mounted挂载 只执行一次
  mounted() {
    //假如 数据是从服务请求回来的
    let listDetail = [
      {
        id: 1,
        name: "鸡蛋",
        num: 10,
        price: 10,
      },
      {
        id: 2,
        name: "鸭蛋",
        num: 20,
        price: 20,
      },
      {
        id: 3,
        name: "鹅蛋",
        num: 30,
        price: 30,
      },
    ];
    console.log(listDetail);
    // 推论 $xx 基本上都是vue组件对象上的方法 this.$xx
    console.log(this.$route);
    console.log(this.$route.params.id);
    // 获取到id 做什么
    // 根据id从listDetail当中查找id为传过来指的对象
    // 查找符合条件的数据中的某个元素
    /* let itemId = this.$route.query.id;
    // find
    let item = listDetail.find((item) => {
      return item.id == itemId;
    });
    console.log(item);
    this.itemEgg = item; */
    this.getItem(this.$route);
    this.listDetail = listDetail;

    // $route当前的路由对象
  },
  data() {
    return {
      itemEgg: {},
      listDetail: [],
    };
  },
  methods: {
    getItem(value) {
      /* let id = value.query.id;
      let item = this.listDetail.find((item) => {
        return item.id == id;
      });
      this.itemEgg = item; */
      this.itemEgg = this.listDetail.find((item) => item.id == value.params.id);
    },
  },
  watch: {
    /* $route(value) {
      console.log(value);
      //当点击的商品类别发生变化时，可以通过watch监听，监听到它的变化，重新筛选赋值
      //   let id = value.query.id;
      //   let item = this.listDetail.find((item) => {
      //     return item.id == id;
      //   });
      //   this.itemEgg = item;
      this.getItem(value);
    }, */
    $route: {
      handler(value) {
        this.getItem(value);
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
</style>